<template>
	<view :class="'text-message ' + (isMine ? 'my-text' : 'to-text')">
		<view v-for="(item, index) in renderDom" :key="index" class="message-body-span">
			<view class="message-body-span-text" v-if="islink(item.text)==true">
				<u-link  :href="item.text" :text="item.text" @click="click"></u-link>
			</view>
			<span class="message-body-span-text" v-else-if="item.name === 'span'">{{ item.text }}</span>
			<image v-if="item.name === 'img'" class="emoji-icon" :src="item.src" ></image>
		</view>
	</view>
</template>

<script>
import { parseText } from '../../../base/message-facade';

export default {
	data() {
		return {
			renderDom: []
		};
	},

	components: {},
	props: {
		message: {
			type: Object
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	mounted() {
		// console.log(this.renderDom)
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.renderDom=parseText(newVal)
			},
			immediate: true,
			deep: true
		}
	},

	beforeMount() {
		// 在组件实例进入页面节点树时执行
	},

	destroyed() {
		// 在组件实例被从页面节点树移除时执行
	},

	methods: {
		islink(url){
			if (/^https?:\/\//.test(url)){
			  return true
			} else {
			  return false
			}

		}
	}
};
</script>
<style>
@import './index.css';
</style>
